<template>
  <div>
    <tableBody
      ref="table"
      :tableConfig="tableConfig"
      :queryApi="queryApi"
      :isOperate="true"
      :operateWidth="130"
    >
      <template v-slot:operate="slotProps">
        <el-switch
          size="small"
          style="
            margin-left: 10px;
            --el-switch-on-color: #13ce66;
            --el-switch-off-color: #ff4949;
          "
          v-model="slotProps.scope.row.status"
          active-text="启用"
          inactive-text="冻结"
          :active-value="1"
          :inactive-value="2"
          @click="changeStatus(slotProps.scope.row)"
        />
      </template>
    </tableBody>
  </div>
</template>

<script lang="ts" setup>
import tableList from "@/utils/tableBody";
import tableBody from "@/components/tableBody.vue";
import { onMounted, reactive, ref } from "vue";
import { status } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { CODE } from "@/utils/StatusCode";

const tableConfig = reactive(tableList.userList);

const queryApi = ref("/user/list");
onMounted(() => {
  query({});
});
const table = ref(null);
function query(data: any) {
  (table as any).value.onSearch(data);
}
function changeStatus(row: any) {
  if (!row.userid) return;
  let flag = row.status;
  row.status = flag == 1 ? 2 : 1;
  ElMessageBox.confirm("是否改变状态", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      row.status = flag;
      const res = await status({
        userid: row.userid,
        status: row.status,
      });
      if (res.code == CODE.OK) {
        ElMessage({
          message: res.message,
          type: "success",
        });
      } else {
        row.status = row.status == 1 ? 2 : 1;
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch(() => {});
}
</script>

<style lang="less" scoped></style>
